<template>
  <div class="swipe">
    <div class="swiper-box">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) in moduleList" :key="index"><img
          :src="item.avatarPath" alt="" class="img-slide" @click="toModel(item.id)">
          <p class="p-slide">{{item.name}}</p></swiper-slide>
      </swiper>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </div>
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
  components: {swiper, swiperSlide},
  name: 'swipe',
  data () {
    return {
      dataObj: {},
      moduleList: {},
      swiperOption: {
        notNextTick: true,
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  mounted () {
    this.loadCacheData()
  },
  methods: {
    toModel (id) {
      this.$router.push({path: `/model/${id}`})
    },
    loadCacheData () {
      let data = localStorage.getItem('data')
      this.dataObj = JSON.parse(data)
      this.moduleList = this.dataObj.moduleList
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus">
  .swipe
    height 310px
    width 100%
    .swiper-box
      width: 100%
      height: 310px
      position: absolute
      bottom: 20px
      .swiper-container
        height 100%
        .swiper-slide
          position: relative
          /* Center slide text vertically */
          display: -webkit-box
          display: -ms-flexbox
          display: -webkit-flex
          display: flex
          -webkit-box-pack: center
          -ms-flex-pack: center
          -webkit-justify-content: center
          justify-content: center
          -webkit-box-align: center
          -ms-flex-align: center
          -webkit-align-items: center
          align-items: center
          transition: 300ms
          .img-slide
            width: 100%
            height: 100%
            border-radius 8px
          .p-slide
            position: absolute
            bottom: 0px
            left: 0
            right: 0
            font-size: 20px
            text-align center
            color #fff
            padding: 10px 0;
            background rgba(0, 0, 0, .3)
            border-bottom-left-radius 8px
            border-bottom-right-radius 8px
        .swiper-slide:not(.swiper-slide-active)
          transform: scale(0.8)
      .swiper-pagination
        width 100%
</style>
